/**
 * 柱状图数据处理
 *
 * @param {data} 数据
 * @return {options} {返回配置}
 */
import {regFenToYuan} from '../number';

const lineOptionsPerson = (data, cb) => {
    const option = {
        title: {
            text: `个人排行${data.length < 10 ? '' : 'top10'}`,
            left: 'center',
            textStyle: {
                fontWeight: 'normal',
                color: '#FFEBAA',
                fontSize: 40
            },
        },
        grid: {
            left: '0',
            right: '2%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            show: false
        },
        yAxis: [
            {
                type: 'category',
                data: [],
                inverse: true,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    inside: false,
                    textStyle: {
                        color: '#FFF',
                        fontSize: '20',
                    },
                    formatter(params, index) {
                        return [
                            `{a${index + 1}|} ${params.length <= 5
                                ? params : params.slice(0, 5)}`
                        ].join('\n');
                    },
                    rich: {},
                    align: 'left',
                    margin: 170,
                },
            },
            {
                type: 'category',
                inverse: true,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    inside: false,
                    textStyle: {
                        color: '#FFF',
                        fontSize: '20',
                    },
                    formatter(val) {
                        return `${val}`;
                    }
                },
                splitArea: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                data: []
            }
        ],
        series: [
            {
                type: 'bar',
                data: [],
                barWidth: 20,
                itemStyle: {
                    emphasis: {
                        barBorderRadius: 10,
                    },
                    normal: {
                        color: '#FFF',
                        barBorderRadius: 20,
                    }
                },
            },
        ]
    };
    const pArr = [];
    data.forEach((ele, index) => {
        pArr.push(new Promise(resolve => {
            const key = `a${index + 1}`;
            const Img = new Image();
            const height = 40;
            Img.onload = () => {
                const canvas = document.createElement('canvas');
                canvas.width = height;
                canvas.height = height;
                const ctx = canvas.getContext('2d');
                ctx.arc(height / 2, height / 2, height / 2, 0, 2 * Math.PI);
                ctx.clip();
                ctx.drawImage(Img, 0, 0, height, height);
                option.yAxis[0].axisLabel.rich[key] = {
                    height,
                    width: height,
                    borderRadius: 25,
                    backgroundColor: {image: canvas},
                };
                resolve();
            };
            Img.onerror = () => {
                option.yAxis[0].axisLabel.rich[key] = {
                    height,
                    width: height,
                    borderRadius: 25,
                    backgroundColor: '#ffffff',
                };
                resolve();
            };
            Img.src = ele.avatar;
        }));
        option.yAxis[0].data.push(ele.name);
        option.yAxis[1].data.push(regFenToYuan(ele.totalMoney));
        option.series[0].data.push(ele.totalMoney);
    });
    Promise.all(pArr).then(() => {
        cb && cb(option);
    });
};

export default lineOptionsPerson;
